import React from 'react';
import PropTypes from 'prop-types';

import cn from 'classnames';

import { withRouter } from 'react-router';

import MessageNav from '../MessageNav';

import Breadcrumb, { Item } from '../../../components/Breadcrumb';
import s from './SystemCentre.module.css';
import EmptyData from '../../../components/empty/EmptyData';

import fetch from 'API/fetch';
import Table from '@knownsec/react-component/dist/Table';
import Pagination from '@knownsec/react-component/dist/Pagination';
import Input from '@knownsec/react-component/dist/Input';
import { datetime } from '../../../../common/formatter';
import { name } from '../../../../../package.json';

function SystemCentre({ className, history, location: { search } }) {
	const { newsIUrl } = window?.kuiper?.app?.config[name];
	const columns = [
		{
			title: '标题',
			dataIndex: 'title',
			render: (text, record) => (
				<a
					href={newsIUrl + 'news/service/detail?id=' + record._id}
					target="_blank"
				>
					{text}
				</a>
			),
		},
		{
			title: '通知时间',
			dataIndex: 'datetime',
			width: 200,
			render: text => <span>{datetime(text, 'YYYY-MM-DD HH:mm:ss')}</span>,
		},
	];
	const [loading, setLoading] = React.useState(false);
	const [type, setType] = React.useState('empty');
	const [serviceList, setServiceList] = React.useState([]);
	const [total, setTotal] = React.useState(0);
	const [filter, setFilter] = React.useState({
		title: '',
		type: 'service',
		page: 1,
	});
	const [title, setTitle] = React.useState('');
	const getServiceList = async filter => {
		setLoading(true);
		const serRes = await fetch(
			`/api/v2/news/list?page=${filter.page}&type=${filter.type}&isSendNotification=1&title=${filter.title}`,
			{
				method: 'GET',
			}
		).catch(e => {
			return {};
		});
		if (serRes.code === 200) {
			setLoading(false);
			setServiceList(serRes.data.data);
			setTotal(serRes.data.total);
		}
		setType('img')
	};
	const handleConfirm = () => getServiceList(filter);

	const handleChange = ({ value }) => {
		setFilter({
			title: value || '',
			type: filter.type,
			page: filter.page,
		});
	};
	React.useEffect(() => {
		getServiceList(filter);
	}, []);

	return (
		<div className={cn(className, s.notificationContainer)}>
			<MessageNav activeKey="system" />
			<div className={s.notificationCentre}>
				<Breadcrumb className={s.breadcrumb}>
					<Item disabled={true}>消息中心</Item>
					<Item>服务公告</Item>
				</Breadcrumb>
				<div className={s.content}>
					<div className={s.toolbox}>
						<Input
							search
							inline
							value={filter.title}
							onChange={handleChange}
							placeholder="搜索标题内容"
							onSearch={handleConfirm}
						/>
					</div>
					<div className={s.plr24}>
						<Table
							pro
							columns={columns}
							loading={loading}
							data={serviceList}
							empty={<EmptyData type={type} className={s.empty2} />}
						/>
						{total > 10 && (
							<div className={cn(s.pt16, s.tar)}>
								<Pagination
									total={total}
									pageSizeOptions={[10, 20, 50]}
									showSizeChanger
									showQuickJumper
									showTotal={total => `共${total}条`}
									current={filter.page}
									page={filter.page}
									onChange={(page, pageSize) => {
										setFilter(Object.assign(filter, { page }));
										handleConfirm();
									}}
								/>
							</div>
						)}
					</div>
				</div>
			</div>
		</div>
	);
}

SystemCentre.propTypes = {
	className: PropTypes.string,
	history: PropTypes.shape({
		push: PropTypes.func.isRequired,
		replace: PropTypes.func.isRequired,
	}).isRequired,
	location: PropTypes.shape({
		search: PropTypes.string.isRequired,
	}).isRequired,
	match: PropTypes.shape({
		params: PropTypes.shape({
			taskType: PropTypes.string,
		}).isRequired,
	}).isRequired,
};

SystemCentre.defaultProps = {
	className: '',
};

export default withRouter(SystemCentre);
